<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>demo1</title>
</head>
<body>
    <canvas id="myCanvas" width="500px" height="520px" style="border:1px solid #ddd;">
    	您的浏览器不支持canvas，建议使用最新版的Chrome
    </canvas>
<script type="text/javascript">
window.onload = function(){
	var c = document.getElementById('myCanvas');
	var ctx = c.getContext('2d');

	if(!true){
		ctx.moveTo(10, 10);
		ctx.lineTo(150, 50);
		ctx.lineTo(20, 100);
		var grd = ctx.createLinearGradient(0, 0, 170, 0);
		grd.addColorStop(0, "black");
		grd.addColorStop(0.5, "red");
		grd.addColorStop(1, "yellow");
		ctx.strokeStyle = grd;
		ctx.stroke();

		ctx.beginPath();
		ctx.moveTo(90, 90);
		ctx.lineTo(80, 150);
		ctx.strokeStyle = "blue";
		ctx.stroke();
	}

	if(!true){
		pic = new Image();
		pic.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558870/o_5.jpg";
		pic.onload = patternFill;

		function patternFill(){
			if(!true){
				var redTexture = ctx.createPattern(pic, "repeat");
				ctx.strokeStyle = redTexture;
				ctx.moveTo(80, 10);
				ctx.lineTo(10, 90);
				ctx.lineWidth = 8;
				ctx.stroke();
			}

			if(true){
				var redTexture = ctx.createPattern(pic, "no-repeat");
				ctx.fillStyle = redTexture;
				ctx.fillRect(0, 0, c.offsetHeight, c.offsetWidth);
			}
		}
	}

	if(!true){
		ctx.lineWidth = 10;
		ctx.beginPath();
		ctx.lineCap = "butt";
		ctx.moveTo(20, 10);
		ctx.lineTo(200, 60);
		ctx.strokeStyle = "red";
		ctx.stroke();

		ctx.beginPath();
		ctx.lineCap = "round";
		ctx.moveTo(30, 90);
		ctx.lineTo(200, 40);
		ctx.strokeStyle = "blue";
		ctx.stroke();

		ctx.beginPath();
		ctx.lineCap = "square";
		ctx.moveTo(10, 30);
		ctx.lineTo(200, 80);
		ctx.strokeStyle = "green";
		ctx.stroke();
	}

	if(!true){
		ctx.lineWidth = 13;
		ctx.beginPath();
		ctx.lineJoin = "bevel";
		ctx.moveTo(20, 20);
		ctx.lineTo(100, 50);
		ctx.lineTo(20, 80);
		ctx.strokeStyle = "red";
		ctx.stroke();

		ctx.beginPath();
		ctx.lineJoin = "round";
		ctx.moveTo(20, 60);
		ctx.lineTo(100, 90);
		ctx.lineTo(20, 150);
		ctx.strokeStyle = "green";
		ctx.stroke();

		ctx.beginPath();
		ctx.lineJoin = "miter";
		ctx.moveTo(20, 90);
		ctx.lineTo(100, 150);
		ctx.lineTo(20, 200);
		ctx.strokeStyle = "blue";
		ctx.stroke();
	}

	if(!true){
		ctx.strokeStyle = "red";
		ctx.strokeRect(10, 10, 190, 100);

		ctx.fillStyle = "blue";
		ctx.fillRect(110, 110, 100, 100);
	}

	if(!true){
		ctx.font = "Bold 50px Arial";
		ctx.textAlign = "left";
		ctx.fillStyle = "#005600";
		ctx.fillText("老马！", 10, 50);
		ctx.strokeText("blog.itjeek.com!", 10, 100);
	}

	if(true){
		ctx.beginPath();
		ctx.arc(60, 60, 50, 0, Math.PI * 2, true);
		ctx.lineWidth = 2.0;
		ctx.strokeStyle = "#000";
		ctx.stroke();

		ctx.beginPath();
		ctx.arc(260, 260, 50, 0, Math.PI * 2, true);
		ctx.fillStyle = "#6cf";
		ctx.fill();

		ctx.beginPath();
		ctx.arc(400, 400, 50, 0, Math.PI * 2, true);
		ctx.lineWidth = 2.0;
		ctx.strokeStyle = "#000";
		ctx.stroke();
		ctx.fillStyle = "#6cf";
		ctx.fill();
	}

	if(!true){
		preImage("http://images.cnblogs.com/cnblogs_com/vajoy/558870/o_5.jpg", function(){
				ctx.drawImage(this, 0, 0);
		});
	}
}

function preImage(url, callback){
    var img = new Image(); //创建一个Image对象，实现图片的预下载
    img.src = url;
    if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
        callback.call(img);
        return; // 直接返回，不用再处理onload事件
    }
    img.onload = function () { //图片下载完毕时异步调用callback函数
        callback.call(img);//将回调函数的this替换为Image对象
    };
}
</script>
</body>
</html>